@layout("/common/_container.html",{}){

<head>
    <script type="text/javascript" src="${ctxPath}/assets/expand/plugins/echarts/dist/echarts-all.js"></script>
</head>

<div class="layui-body-header">
    <span class="layui-body-header-title">服务监控</span>
</div>

<!--
CPU & 内存信息
服务器信息
Java虚拟机信息
磁盘信息

-->

<div class="layui-fluid">

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">CPU用户使用率</div>
                    <div class="layui-card-body">

                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main1" style="width: 400px;height:300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">CPU系统使用率</div>
                    <div class="layui-card-body">

                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main2" style="width: 400px;height:300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">CPU当前空闲率</div>
                    <div class="layui-card-body">

                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main3" style="width: 400px;height:300px;"></div>

                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">CPU</div>
                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody id="view-cpu">

                            <script id="cpuLaytpl" type="text/html">
                                <tr>
                                    <td>核心数</td>
                                    <td>{{ d.data.cpu.cpuNum }}个</td>
                                </tr>

                                <tr>
                                    <td>用户使用率</td>
                                    <td id="cpuUsed">{{ d.data.cpu.used }}%</td>
                                </tr>

                                <tr>
                                    <td>系统使用率</td>
                                    <td id="cpuSys">{{ d.data.cpu.sys }}%</td>
                                </tr>

                                <tr>
                                    <td>当前空闲率</td>
                                    <td id="cpuFree">{{ d.data.cpu.free }}%</td>
                                </tr>
                            </script>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">内存信息</div>
                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>属性</th>
                                <th>内存</th>
                                <th>JVM</th>
                            </tr>
                            </thead>
                            <tbody id="view-memory">

                            <script id="memoryLaytpl" type="text/html">
                                <tr>
                                    <td>总内存</td>
                                    <td id="memTotal">
                                        {{#  if(d.data.mem.total){ }}
                                        {{ d.data.mem.total }}GB
                                        {{#  } }}
                                    </td>
                                    <td id="jvmTotal">
                                        {{#  if(d.data.jvm.total){ }}
                                        {{ d.data.jvm.total }}MB
                                        {{#  } }}
                                    </td>
                                </tr>

                                <tr>
                                    <td>已用内存</td>
                                    <td id="menUsed">
                                        {{#  if(d.data.mem.used){ }}
                                        {{ d.data.mem.used }}GB
                                        {{#  } }}
                                    </td>
                                    <td id="jvmUsed">
                                        {{#  if(d.data.jvm.used){ }}
                                        {{ d.data.jvm.used }}MB
                                        {{#  } }}
                                    </td>
                                </tr>

                                <tr>
                                    <td>剩余内存</td>
                                    <td id="memFree">
                                        {{#  if(d.data.mem.free){ }}
                                        {{ d.data.mem.free }}GB
                                        {{#  } }}
                                    </td>
                                    <td id="jvmFree">
                                        {{#  if(d.data.jvm.free){ }}
                                        {{ d.data.jvm.free }}MB
                                        {{#  } }}
                                    </td>
                                </tr>

                                <tr>
                                    <td>使用率</td>
                                    <td id="memUsage">
                                        {{#  if(d.data.mem.usage){ }}
                                        {{ d.data.mem.usage }}%
                                        {{#  } }}
                                    </td>
                                    <td id="jvmUsage">
                                        {{#  if(d.data.jvm.usage){ }}
                                        {{ d.data.jvm.usage }}%
                                        {{#  } }}
                                    </td>
                                </tr>
                            </script>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">服务器信息</div>
                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">
                            <tbody id="view-server-info">
                            <script id="serverInfoLaytpl" type="text/html">
                                <tr>
                                    <td>服务器名称</td>
                                    <td>
                                        {{#  if(d.data.sys.computerName){ }}
                                        {{ d.data.sys.computerName }}
                                        {{#  } }}
                                    </td>
                                    <td>操作系统</td>
                                    <td>
                                        {{#  if(d.data.sys.osName){ }}
                                        {{ d.data.sys.osName }}
                                        {{#  } }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>服务器IP</td>
                                    <td>
                                        {{#  if(d.data.sys.computerIp){ }}
                                        {{ d.data.sys.computerIp }}
                                        {{#  } }}
                                    </td>
                                    <td>系统架构</td>
                                    <td>
                                        {{#  if(d.data.sys.osArch){ }}
                                        {{ d.data.sys.osArch }}
                                        {{#  } }}
                                    </td>
                                </tr>
                            </script>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Java虚拟机信息</div>
                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">
                            <tbody id="view-java-jvm">
                            <script id="javaJvmLaytpl" type="text/html">
                                <tr>
                                    <td>Java名称</td>
                                    <td>
                                        {{#  if(d.data.jvm.name){ }}
                                        {{ d.data.jvm.name }}
                                        {{#  } }}

                                    </td>
                                    <td>Java版本</td>
                                    <td>
                                        {{#  if(d.data.jvm.version){ }}
                                        {{ d.data.jvm.version }}
                                        {{#  } }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>启动时间</td>
                                    <td>
                                        {{#  if(d.data.jvm.startTime){ }}
                                        {{ d.data.jvm.startTime }}
                                        {{#  } }}
                                    </td>
                                    <td>运行时长</td>
                                    <td>
                                        {{#  if(d.data.jvm.runTime){ }}
                                        {{ d.data.jvm.runTime }}
                                        {{#  } }}
                                    </td>
                                </tr>
                                <tr width="100%">
                                    <td>安装路径</td>
                                    <td>
                                        {{#  if(d.data.jvm.home){ }}
                                        {{ d.data.jvm.home }}
                                        {{#  } }}
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr width="100%">
                                    <td>项目路径</td>
                                    <td>
                                        {{#  if(d.data.sys.userDir){ }}
                                        {{ d.data.sys.userDir }}
                                        {{#  } }}
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </script>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">磁盘信息</div>
                    <div class="layui-card-body">

                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th width="20%">盘符路径</th>
                                <th width="14%">文件系统</th>
                                <th width="14%">盘符类型</th>
                                <th width="13%">总大小</th>
                                <th width="13%">可用大小</th>
                                <th width="13%">已用大小</th>
                                <th width="13%">已用百分比</th>
                            </tr>
                            </thead>
                            <tbody id="view-disk">

                            <script id="diskLaytpl" type="text/html">
                                {{#  layui.each(d.data.sysFiles, function(index, item){ }}
                                <tr>
                                    <td>
                                        {{#  if(item.dirName){ }}
                                        {{ item.dirName }}
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.sysTypeName){ }}
                                        {{ item.sysTypeName }}
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.typeName){ }}
                                        {{ item.typeName }}
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.total){ }}
                                        {{ item.total }}GB
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.free){ }}
                                        {{ item.free }}GB
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.used){ }}
                                        {{ item.used }}GB
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(item.usage){ }}
                                        {{ item.usage }}%
                                        {{#  } }}
                                    </td>
                                </tr>
                                {{#  }); }}


                            </script>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>



        </div>
    </div>

</div>

<script>

    layui.use(['form', 'table', 'admin', 'ax', 'laytpl'], function () {
        var $ = layui.$;
        var admin = layui.admin;
        var form = layui.form;
        var table = layui.table;
        var $ax = layui.ax;
        var laytpl = layui.laytpl;


/* ********************************************页面初始化******************************************** */

        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option1 = ({
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [{
                name: 'CPU',
                type: 'gauge',
                detail: { formatter: '{value}%' },
                data: [{ value: 50, name: '用户使用率' }]
            }]
        });

        var myChart2 = echarts.init(document.getElementById('main2'));
        // 指定图表的配置项和数据
        var option2 = ({
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [{
                name: 'CPU',
                type: 'gauge',
                detail: { formatter: '{value}%' },
                data: [{ value: 50, name: '系统使用率' }]
            }]
        });

        var myChart3 = echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
        var option3 = ({
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [{
                name: 'CPU',
                type: 'gauge',
                detail: { formatter: '{value}%' },
                data: [{ value: 50, name: '当前空闲率' }]
            }]
        });

        var loadIndex;
        $.ajax({
            url:"/system/monitor/server/data",
            data:null,
            async:false,
            type:'get',
            dataType:'json',
            beforeSend: function(){
                loadIndex = layer.load(2,{
                    shade: [0.8, 'gray'] //0.5透明度的灰色背景
                    ,content:"正在加载..."
                    ,success: function(layero){
                        layero.find('.layui-layer-content').css({
                            'padding-left': '-80px',
                            'padding-top': '39px',
                            'width': '200px'
                        });
                    }
                });
            },
            success:function (data) {
                //CPU
                cpu(data);
                option1.series[0].data[0].value = data.data.cpu.used;
                option2.series[0].data[0].value = data.data.cpu.sys;
                option3.series[0].data[0].value = data.data.cpu.free;
                myChart1.setOption(option1, true)
                myChart2.setOption(option2, true);
                myChart3.setOption(option3, true);

                //内存
                memory(data);
                //服务器信息
                serverInfo(data);
                //Java虚拟机信息
                javaJvm(data);
                //磁盘信息
                disk(data);
                layer.close(loadIndex);
            }
        });


        //CPU
        function cpu(data) {
            var getCpuTpl = cpuLaytpl.innerHTML
                ,view = document.getElementById('view-cpu');
            laytpl(getCpuTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        //内存
        function memory(data) {
            var getMemoryTpl = memoryLaytpl.innerHTML
                ,view = document.getElementById('view-memory');
            laytpl(getMemoryTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        //服务器信息
        function serverInfo(data) {
            var getServerInfoTpl = serverInfoLaytpl.innerHTML
                ,view = document.getElementById('view-server-info');
            laytpl(getServerInfoTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        //Java虚拟机信息
        function javaJvm(data) {
            var getJavaJvmTpl = javaJvmLaytpl.innerHTML
                ,view = document.getElementById('view-java-jvm');
            laytpl(getJavaJvmTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        //磁盘信息
        function disk(data) {
            var getDiskTpl = diskLaytpl.innerHTML
                ,view = document.getElementById('view-disk');
            laytpl(getDiskTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        var webSocket;
        var prefix = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/system/ws/server/";
        $.get('/system/getIp',function (resp) {
            if ('WebSocket' in window) {
                webSocket = new WebSocket(prefix + resp.data.deptId + "/" + resp.data.ip);
            }else if ('MozWebSocket' in window) {
                webSocket = new WebSocket(prefix + resp.data.deptId + "/" + resp.data.ip);
            }else {
                //websocket = new SockJS(prefix + ip);
            }

            //打开socket,握手
            webSocket.onopen = function (event) {
                console.info("websocket已经连接");
            };

            //接收推送的消息
            webSocket.onmessage = function (event) {
                setTimeout(ws_ping, 100);
                var data = JSON.parse(event.data);
                option1.series[0].data[0].value = data.cpu.used;
                option2.series[0].data[0].value = data.cpu.sys;
                option3.series[0].data[0].value = data.cpu.free;
                myChart1.setOption(option1, true)
                myChart2.setOption(option2, true);
                myChart3.setOption(option3, true);
                $("#cpuUsed").html(data.cpu.used + "%");
                $("#cpuSys").html(data.cpu.sys + "%");
                $("#cpuFree").html(data.cpu.free + "%");

                $("#memTotal").html(data.mem.total + "GB");
                $("#jvmTotal").html(data.jvm.total + "MB");
                $("#memUsed").html(data.mem.used + "GB");
                $("#jvmUsed").html(data.jvm.used + "MB");
                $("#memFree").html(data.mem.free + "GB");
                $("#jvmFree").html(data.jvm.free + "MB");
                $("#memUsage").html(data.mem.usage + "%");
                $("#jvmUsage").html(data.jvm.usage + "%");
                $("#jvmRunTime").html(data.jvm.runTime);

            };

            //错误时
            webSocket.onerror = function (event) {
                console.info("websocket发生错误" + event);
            };

            //关闭连接
            webSocket.onclose = function () {
                console.info("关闭连接");
            };

            //监听窗口关闭
            window.onbeforeunload = function (event) {
                webSocket.close();
            };

            // 定时发个空消息,避免服务器断开连接
            function ws_ping() {
                if (webSocket) {
                    webSocket.send("servers"); // TODO 断线重连.
                }
            }
            setTimeout(ws_ping, 100); // 2秒一次就可以了

        });




    });

</script>


@}